<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box1 .box2 .demo, .box1 #box2 #ps {
            color: red;
        }

        /* #box1 .box2 .demo, .box1 #box2 #ps {
            color: red !important;
        } */

        .box1 .box2 #box3 .demo {
            color: green;
        }
    </style>
</head>
<body>
    <!-- 
        css层叠式

        继承性 文字相关属性
        应用：祖先级标签比如<body> 统一继承

        层叠性 只会有一个属性成功加载
        1 比较权重 
            基础选择器：高层叠低的 范围越大 权重越小 ： * < tag < class < id
            高级选择器：依次比较组成高级选择器的id的个数 类的个数 标签的个数 
                       如果前面能比较大小就不在比较后面 如果前面相等就往后比较
            比较顺序：（id个数  类的个数  标签的个数）
        2 如果权重相同 书写在后面的层叠前面的

        祖先级
        选中的是组先籍 文字样式被继承 也会出现层叠
        1 就近原则 距离目标标签的远近 近的优先
        2 距离相同的祖先级 判断选择器权重
        3 祖先 权重 都相同 就看书写顺序 后写的优先

        importent
        关键字 !importert 写在某个属性值后面 空格+！+improtent 权重提到最大
        就近原则仍旧有效 就近原则高于权重选择的判断

        行内式
        权重高于所有选择器 但是低于important



    -->

    <!-- .box1#box1>.box2#box2>.box3#box3 -->
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class=“demo” id="ps">文字颜色</p>
            </div>
        </div>
    </div>
</body>
</html>